<template>
  <view>
    <!-- 选择收货地址的盒子 -->
    <view class="address-choose-box" v-if="JSON.stringify(address)==='{}'">
      <button type="primary" size="mini" class="btnChooseAddress" @click="openAddress">请选择收货地址+</button>
    </view>
    <!-- 渲染收货信息的盒子 -->
    <view class="address-info-box" v-else @click="openAddress">
      <view class="row1">
        <view class="row1-left">
          <view class="username">收货人：<text>{{address.userName}}</text></view>
        </view>
        <view class="row1-right">
          <view class="phone">电话：<text>{{address.telNumber}}</text></view>
          <uni-icons type="arrowright" size="16"></uni-icons>
        </view>
      </view>
      <view class="row2">
        <view class="row2-left">收货地址：</view>
        <view class="row2-right">{{addstr}}</view>
      </view>
    </view>

    <!-- 底部的边框线 -->
    <image src="/static/cart_border@2x.png" class="address-border"></image>
    <!-- 授权提示弹层 -->
    <view class="auth-wrap" v-if="showPropup">
      <view class="auth">
        <view class="auth-title">
          检测到您没打开地址权限，是否去设置打开？
        </view>
        <view class="auth-btns">
          <text @click="cancel">取消</text>
          <text @click="confirm">同意</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    computed: {
      ...mapState('m_user', ['address']),
      ...mapGetters('m_user', ['addstr'])
    },
    data() {
      return {
        showPropup: false
      };
    },
    methods: {
      ...mapMutations('m_user', ['updateAddress']),
      // 取消授权
      cancel() {
        this.showPropup = false
        uni.$showToast('获取地址权限失败');
      },
      // 确定授权
      async confirm () {
        this.showPropup = false
        const [err, suc] = await uni.openSetting()
        // 如果在授权设置界面用户不同意
        if ((err && err.errMsg) || suc.authSetting['scope.address'] === false) {
          return uni.$showToast('获取地址权限失败');
        }
        let [err1, ret] = await uni.chooseAddress();

        if (ret) {
          return this.updateAddress(ret);
        }
        uni.$showToast('获取地址权限失败');
      },
      async openAddress () {
        const [err, suc] = await uni.chooseAddress().catch(err => err)
        // console.log(suc)
        // 授权成功执行
        if (suc && suc.errMsg === 'chooseAddress:ok') {
          return this.updateAddress(suc)
        }
        // 选择地址页面用户点击取消
        if (err && /cance/.test(err.errMsg)) {
          return uni.$showToast('你取消选择收货地址')
        }

        this.showPropup = true
      }
    }
  }
</script>

<style lang="scss">
  // 底部边框线的样式
  .address-border {
    display: block;
    width: 100%;
    height: 5px;
  }

  // 选择收货地址的盒子
  .address-choose-box {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  // 渲染收货信息的盒子
  .address-info-box {
    font-size: 12px;
    height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 5px;

    // 第一行
    .row1 {
      display: flex;
      justify-content: space-between;

      .row1-right {
        display: flex;
        align-items: center;

        .phone {
          margin-right: 5px;
        }
      }
    }

    // 第二行
    .row2 {
      display: flex;
      align-items: center;
      margin-top: 10px;

      .row2-left {
        white-space: nowrap;
      }
    }
  }

  .auth-wrap {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;

    .auth {
      width: 500rpx;
      padding: 30rpx 30rpx 37rpx;
      background: #fff;
      border-radius: 10rpx;
    }

    .auth-title {
      padding-top: 38rpx;
      font-size: 32rpx;
      text-align: center;
      margin-bottom: 100rpx;
    }

    .auth-btns {
      width: 100%;

      text {
        display: inline-block;
        text-align: center;
        width: 50%;

        &:first-child {
          color: #666;
        }

        &:last-child {
          color: #1aad19;
        }
      }
    }
  }
</style>
